/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    useTheme,
    Text,
    IconButton,
    IconArrowLeft,
    TwoHalfRightPanel,
    InputLine,
    Select,
    CommitInput,
    ButtonRefComp,
    SuffixInput,
    LineColumn,
    Container,
    CheckSwitch,
    VerticalMenu,
    DdMenuItem,
    InputGroup,
    TextArea,
    InputDatalist,
    Input,
    Button,
    Toolbar, Navbar, TableBody, TableRow, CCell, Table, Cell,
} from "customize-easy-ui-component";

// import { Link as RouterLink } from "../../routing/Link";
import {PreloadedQuery, usePreloadedQuery, useRefetchableFragment} from "react-relay/hooks";
// import {TechnicalConfigQuery, TechnicalConfigQuery$data} from "./__generated__/TechnicalConfigQuery.graphql";
//import {noop} from "use-media/lib/utilities";

// import {DivisionChooseQuery$data} from "../../unit/division/__generated__/DivisionChooseQuery.graphql";
import {Dispatch, MutableRefObject, SetStateAction, useContext, useEffect} from "react";

import {
    Disposable,
} from 'relay-runtime';
// import useUpdateDetailMutation from "./useUpdateDetailMutation";
import {InternalEditorResult} from "../common/base";
// import useBui`ldRequestMutation from "../hook/useBuildRequestMutation";
// import {层门形式} from "../../device/edit/升降机";
// import {设备同步作业} from "../../maintenance/DeviceMaint";
import {ChooseEqps} from "../comp/ChooseEqps";
import {useStorageState} from "react-storage-hooks";
import RoutingContext from "../routing/RoutingContext";
// import {useMainConfig} from "../hook/useMainConfig";
import {StopIspLetterQuery, StopIspLetterQuery$data} from "./__generated__/StopIspLetterQuery.graphql";
import {EqpOpenclose} from "./edit/EqpOpenclose";
import {DeviceUnits} from "./edit/DeviceUnits";
import useBuildAgreementMutation from "../agreement/hook/useBuildAgreementMutation";
import useBuildRequestMutation from "./hook/useBuildRequestMutation";
import {OneUserChoose} from "../common/user/OneUserChoose";
import {RevisionPermit} from "./edit/RevisionPermit";
import {RevisionExecution} from "./edit/RevisionExecution";
import {AloneContainer} from "../comp/AloneContainer";
import {Main$data, Main$key} from "./__generated__/Main.graphql";
import {RefetchFnDynamic} from "react-relay/relay-hooks/useRefetchableFragmentNode";
import {StopInspec} from "./edit/StopInspec";
import {dateToChinese} from "../common/tool";
import {eqpTypeAllMap} from "../dict/eqpComm";
import {moneyUppercase22} from "../common/money-uppercase";
import {DirectLink} from "../routing/Link";
// import {TwoHalfRightPanel} from "../../../UiDebugSave/sample/TwoHalfRightPanel";
// import {MainQuery$data} from "../hook/__generated__/useMainConfigQuery.graphql";
// import {会计项目录} from "../../dict/financeComm";

//import useReckonIspFeeMutation from "./useReckonIspFeeMutation";
//[HOOK限制]按钮点击函数内部直接上toast()或toaster.notify()很可能无法正常显示。而放在函数组件顶层render代码前却能正常。
const graphql = require("babel-plugin-relay/macro");

interface StopIspLetterProps {
    id?: string;
    prepared: {
        //【特别注意】query路由器若不是提供这个类型的查询DetailConfigQuery，本组件也不会抛出异常！在usePreloadedQuery<DetailConfigQuery>()不报错！
        query: PreloadedQuery<StopIspLetterQuery>;
    }
    children: React.ReactNode;
    routeData: any;
}

/**右边的主要编辑内容
 * */
export default function StopIspLetter(props: StopIspLetterProps) {
    const data = usePreloadedQuery<StopIspLetterQuery>(
        graphql`
            query StopIspLetterQuery(
                $rqId:ID!,
            ) {
                node(id: $rqId)
                {
                    id, __typename
                    ... on Request {
                        id,status,ispu{id name}, crman{id,username,mobile,person{id,name},dep{id,name},office{id,name}},
                        mdtime, mod, dat,
                    }
                }
            }
        `,
        props.prepared.query,
    );
    const { node:request, }=data;     //通常接收方式

    const {call:updateDetailFunc,doing,called, result}= {} as any// useBuildRequestMutation();
    //  const {call:cudChFeefunc, doing, called, reset, result:cudAck}= useCudChargingFeeMutation();     //删除专用，增加在子组件内部独立的；

    //先试一试：直接在父辈同一个组件内直接做 编辑器方式的保存。 PreloadedQuery+Mutation()都在同一组件干。
    // const [ccost, setCcost] = React.useState<number|undefined>(item?.ccost!);
    // const [fcode, setFcode] = React.useState(item!.fcode);
    // const [zmoney, setZmoney] = React.useState(item?.zmoney);
    // const [totm, setTotm] = React.useState<number|undefined>(item!.totm!);
    //会根据参数判定输出类型啊！报错了,useRef<T>(initialValue: T|null): RefObject<T>; useRef<T>(initialValue: T): MutableRefObject<T>;
    const {save, field, reurl, p1field, multi}= window.history.state?.state??{};       //通用伪对话框传递格式field=上次跳转目标选择字段。
    const {history } = useContext(RoutingContext);

    if(!data)  throw new Error(`没找到申请单 ID${props.id}`);
//为了比较适合打印改造成居中单独页面，而不是TwoHalf框架的页面。完美打印的文书需要专门打印机适配页面才好。
    return (
        <AloneContainer css={{
            background: 'white',
            alignItems: 'unset',
            maxWidth: '794px',    //A4纸张 或者电脑屏幕限制宽
            "@media print": {
                margin: 'unset',       //小于一页纸高度的就不要居中
            },
        }}>
            <StopIspInner det={request}/>
        </AloneContainer>
    );
};

/**
 * 为了避免把保存按钮也一起放入到编辑器组件中，还能把编辑后的属性数据全部提供给父辈组件，
 * 真正mutation接口函数操作+按钮触发:直接安排在上一级组件内做的。
 * 【通用模式】规定统一的数据修改保存的模式：引进专有的props.editorRef.doConfirm():来做规范和统一处理。
 * 表格<Table printColWidth={ 像素合计 986  太大了，A4会缩放其它文本内容。 maxWidth: '794px', A4纸张限制宽
* */
interface Props {
    //特别注意这个类型定义 不要挪用别人的，要和LoadQuery()哪一个graphQl的定义保持一致性，#避免古怪问题！
    det: StopIspLetterQuery$data["node"];
}
/**业务信息配置--编辑器主体子组件*/
function StopIspInner({det}: Props) {
    const {history } = useContext(RoutingContext);
    const theme = useTheme();
    const  aux = JSON.parse(det?.dat || '{}');
    const devcount= aux?.devs?.length;

    //【尺寸】对于A4打印纸张竖排宽度，通常用 <Text> 的默认情况的一行大约44个汉字大小，默认情况的每张是43行，=1892汉字。
    //对照宋体4号字标准字间距，无网格单倍行间距，全汉字，可以打印1558个； 行数是44行每张A4纸。
    //规范的正文是：22行X28个字，每页字数=616 ; 正文用小四号宋体。
    //浏览器默认字体的排版：行数是44行，而每一行字数44个。  #而<Text>默认是换行display：block的，除非其上一级div做了display: 'flex'。
    return (
        <>
            <div css={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'flex-end',
            }}>
                <Text  css={{
                    marginBottom: 'unset',
                }}
                       variant="h4"
                >
                    FJSEI
                </Text>
                <Text
                    css={{
                    }}
                >
                    FQP-J07-R05-2018
                </Text>
            </div>
            <Text  css={{
                textAlign: "center",
                marginBottom: 'unset',
            }}
                   variant="h5"
            >
            {det?.ispu?.name || ''}
            </Text>
            <Text  css={{
                textAlign: "center",
                marginBottom: 'unset',
            }}
                   variant="h5"
            >
            中止监督检验通知书
            </Text>
            <Text  css={{
                marginRight: '2rem',
                textAlign: 'end',
            }}
            >
            编号：{det?.id}
            </Text>
            <div  css={{
                paddingTop: "8px",
                borderTop: 'solid thin',
            }} >
                <Text css={{
                    display: 'flex',
                    marginBottom: '0.5rem'
                }}>
                    {aux?.服务单 || ''}：
                </Text>
                <Text css={{
                    textIndent: '2rem',
                    display: 'flex',
                }}>
                    你单位承接的{aux?.项目名}涉及{eqpTypeAllMap.get(aux?.设备种)}{devcount}台（详见清单）由于{aux?.sttype}
                    原因无法正常开展监督检验，我单位自{dateToChinese(aux?.中止日)}起中止该项目的监督检验。
                </Text>
                <Text css={{
                    textIndent: '2rem',
                    display: 'flex',
                }}>
                    你单位应将上述情况告知建设单位；做好现场安全隐患排查工作，对易发生事故的风险点
                    设置安全防护措施，设置安全警示标志；再次进入现场施工或整改完成后，应提前7天书面告知我单
                    位，否则不予检验；未收到我单位出具检验结论为“合格”的监督检验证书，特种设备严禁使用。
                </Text>
                <Text css={{
                    textIndent: '2rem',
                    display: 'flex',
                }}>
                    若该项目正常施工或已取消，你单位应来函说明情况。
                </Text>

                <div css={{
                    display: 'flex',
                    margin: '1rem 0 0 0',
                    "@media print": {
                        margin: '3% 0 0 0',
                        pageBreakInside: 'avoid',
                    },
                }}>
                    <div css={{
                        flex: '50%',
                    }}>
                        监检联系人：{det?.crman?.person?.name || ''}
                        <br/>
                        <br/>
                    </div>
                    <div css={{
                        flex: '50%',
                    }}>
                        联系电话：{det?.crman?.mobile || ''}
                        <br/>
                        <br/>
                        {det?.ispu?.name || ''}（检验专用章）
                        <br/>
                        <br/>
                        {dateToChinese(det?.mdtime!)}
                    </div>
                </div>
                <br/><br/>
                抄送：{aux?.使用单 || ''}
                <hr/>
                本通知一式三份，检验机构、施工单位、建设单位（使用单位）各一份。
                <Text  css={{
                    textAlign: "center",
                    marginBottom: 'unset',
                }}
                       variant="h5"
                >
                中止监检设备清单
                </Text>
                项目名称：{aux?.项目名}
                <div css={{
                    display: 'flex',
                    margin: '1rem 0 0 0',
                    "@media print": {
                        margin: '3% 0 0 0',
                        pageBreakInside: 'avoid',
                    },
                }}>

                    <Table  fixed={ ["6%","8%","26%","14%","8%","%","14%"]  }
                            printColWidth={ ["46","70","240","160","70","240","160"] }
                            css={ {borderCollapse: 'collapse' } }
                    >
                        <TableBody>
                            <TableRow>
                                <CCell component="th" scope="row">设备技术参数</CCell>
                                <CCell colSpan={6} css={{padding:0}}>
                                    <Table  fixed={ ["17%","33%","16%","%"]  }
                                            printColWidth={ ["95","210","110","300"] }
                                            css={ {borderCollapse: 'collapse', height:'fill-available'} }
                                    >
                                        <TableBody>
                                            <TableRow >
                                                <CCell>额定载重量</CCell>
                                                <CCell> 额定载荷  kg</CCell>
                                                <CCell>额定速度</CCell>
                                                <CCell> 2运行速度  m/s</CCell>
                                            </TableRow>
                                            <TableRow >
                                                <CCell>层站数</CCell>
                                                <CCell> 电梯层数  层   门</CCell>
                                                <CCell>控制方式</CCell>
                                                <CCell> .控制方式 </CCell>
                                            </TableRow>
                                        </TableBody>
                                    </Table>
                                </CCell>
                            </TableRow>
                            <TableRow>
                                <CCell component="th" scope="row">检验依据</CCell>
                                <Cell colSpan={6}>《电梯监督检验和定期检验规则——曳引与强制驱动电梯》（TSG T7001-2009）及1号、2号修改单</Cell>
                            </TableRow>
                            <DirectLink  href={`/report/EL-DJ/ver/nstrument`}>
                                <TableRow >
                                    <CCell component="th" scope="row" rowSpan={1+2}>主要检验仪器设备</CCell>
                                    <CCell>序号</CCell>
                                    <CCell>仪器名称</CCell>
                                    <CCell>仪器编号</CCell>
                                    <CCell>序号</CCell>
                                    <CCell>仪器名称</CCell>
                                    <CCell>仪器编号</CCell>
                                </TableRow>
                            </DirectLink>
                            {aux?.devs?.map((o,i) => {
                                return (
                                    <TableRow key={i}>
                                        <CCell>{o.s1}</CCell>
                                        <CCell>{o.name1}</CCell>
                                        <CCell css={{wordBreak: 'break-all'}}>{o.no1}</CCell>
                                        <CCell>{o.s2}</CCell>
                                        <CCell>{o.name2}</CCell>
                                        <CCell css={{wordBreak: 'break-all'}}>{o.no2}</CCell>
                                    </TableRow>
                                );
                            } )
                            }
                            <DirectLink  href={`/report/EL-DJ/ver/Conclusion`}>
                                <TableRow>
                                    <CCell component="th" scope="row">检验结论</CCell>
                                    <CCell colSpan={6}><Text variant="h1" css={{fontSize:'4rem'}}>aa</Text></CCell>
                                </TableRow>
                            </DirectLink>
                            <DirectLink  href={`/report/EL-DJ/ver/1/Remark`}>
                                <TableRow>
                                    <CCell component="th" scope="row">备注</CCell>
                                    <Cell colSpan={6}>qq</Cell>
                                </TableRow>
                            </DirectLink>
                        </TableBody>
                    </Table>

                </div>
                <br/><br/>
                以上设备我单位自{dateToChinese(aux?.中止日)}起中止监检，请做好安全防护措施，避免发生不必要的事故，
                未经监督检验或者监督检验不合格的特种设备，不得交付使用。
                <hr/>
                温馨提醒：
                <Text css={{
                    textIndent: '2rem',
                    display: 'flex',
                }}>
                    根据主席令第四号《中华人民共和国特种设备安全法》
                </Text>
                <Text css={{
                    textIndent: '2rem',
                    display: 'flex',
                }}>第25条和79条规定：特种设备安装、改造、维修过程，应经监检机构按照检规要求进行检验，
                若违反并逾期未整改，处五万元以上二十万元以下罚款；没收违法所得；情节严重的，吊销生产许
                可证。
                </Text>
                <Text css={{
                    textIndent: '2rem',
                    display: 'flex',
                }}>第32条和84条规定：使用单位应当使用检验合格的特种设备，若违反处三万元以上三十万元以
                下罚款。
                </Text>
                <hr/>
            </div>
            <div css={{
                marginTop: '0.5rem',
                "@media print": {
                    display: 'none'
                },
            }}>
                <Button  intent="primary"
                         onPress={() => { window.print();
                         }}
                >预览转PDF或直接打印
                </Button>
            </div>
        </>
    );
}

